<div class="rightDiv">
  <div class="exciseTableDiv">
    <div class="searchDiv fl-r" style="margin-bottom: 15px">
      <label>
        <span>角色：</span>
        <input nz-input placeholder="请输入角色" [(ngModel)]="seachName"/>
      </label>
      <label>
        <span>创建人：</span>
        <input nz-input placeholder="请输入创建人" [(ngModel)]="operator">
      </label>
      <label style="margin-right: 0">
        <button nz-button style="margin-right:10px" nzType="primary" (click)="pageList()">查询</button>
        <button nz-button nzType="default" (click)="resetSearch()">重置</button>
      </label>
    </div>
    <div class="tableTop fl-l" style="margin-bottom: 15px">
      <button nz-button nzType="primary" (click)="addBtn()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>新增
      </button>
    </div>
    <div style="margin-top: 35px">
      <ng-template #totalTemplate let-total>总共 {{ pageInfo.totalRecords? pageInfo.totalRecords:0 }} 条</ng-template>
      <nz-table
        #roleTable
        nzBordered
        [nzData]="list"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo.first"
        [nzTotal]="pageInfo.totalRecords"
        [nzShowTotal]="totalTemplate"
        [nzPageSize]="pageInfo.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[10,20,30,50,100]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="searchPageIndex($event)"
        (nzPageSizeChange)="searchPageSize($event)"
      >
        <thead>
        <tr>
          <th nzWidth="80px">序号</th>
          <th>角色</th>
          <th>备注</th>
          <th>创建时间</th>
          <th>创建人</th>
          <th nzWidth="250px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of roleTable.data;let num=index;">
          <td>{{num + 1}}</td>
          <td>{{ item.name}}</td>
          <td>{{ item.remark}}</td>
          <td>{{ item.gmtCreate | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td>{{ item.operator}}</td>
          <td>
            <span class="operaFont firOpera" (click)="editRole(item)">编辑</span>
            <span class="operaFont firOpera" (click)="assigAuthority(item.id)">分配权限</span>
            <span class="operaFont firOpera" (click)="role2User(item)">分配用户</span>
            <span class="operaFont"
                  nz-popconfirm
                  nzOkType="danger"
                  [nzTitle]="'确定删除角色'+item.name+'吗?'"
                  (nzOnConfirm)="delete(item.id)"
                  nzPlacement="top"
            >删除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>


<!--新增菜单-->
<nz-modal [(nzVisible)]="isAddEdit"
          nzWidth="535px"
          nzMaskClosable="false"
          [nzTitle]="modalTitle"
          [nzContent]="modalContent"
          (nzOnCancel)="isAddEdit = false"
          [nzFooter]="footModel"
>
  <ng-template #modalTitle>
    <span *ngIf="!role.id">新增角色</span>
    <span *ngIf="role.id">编辑角色</span>
  </ng-template>
  <ng-template #modalContent>
    <form nz-form [formGroup]="roleForm">
      <nz-form-item>
        <nz-form-label [nzSm]="5" nzRequired
                       nzFor="name"
        >
          角色
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <input nz-input placeholder="请输入角色名称"
                 [(ngModel)]="role.name"
                 formControlName="name"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="5" nzFor="name">
          备注
        </nz-form-label>
        <nz-form-control [nzSm]="18">
          <input nz-input
                 placeholder="请输入角色备注"
                 [(ngModel)]="role.remark"
                 formControlName="remark"
          />
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <ng-template #footModel>
    <button nz-button nzType="default"
            (click)="isAddEdit = false"
    >取消
    </button>
    <button nz-button nzType="primary"
            [disabled]="!roleForm.valid"
            (click)="submitRole()"
    >保存
    </button>
  </ng-template>
</nz-modal>

<!--分配权限-->
<nz-modal [(nzVisible)]="isAssigAuthority"
          nzWidth="485px"
          class="roleForStyle"
          [nzTitle]="authorityTitle"
          nzMaskClosable="false"
          [nzContent]="authorityContent"
          (nzOnCancel)="isAssigAuthority = false"
          [nzFooter]="authorityModel"
>
  <ng-template #authorityTitle>
    权限分配
  </ng-template>
  <ng-template #authorityContent>
    <div style="max-height: 350px;overflow: auto">
      <nz-tree
        [nzData]="modelTree"
        nzCheckable
        nzMultiple
        [nzSelectedKeys]="authArr"
        [nzCheckedKeys]="authArr"
      >
      </nz-tree>
    </div>
  </ng-template>
  <ng-template #authorityModel>
    <button nz-button nzType="default"
            (click)="isAssigAuthority = false"
    >取消
    </button>
    <button nz-button nzType="primary"
            (click)="submitAuth()"
    >保存
    </button>
  </ng-template>
</nz-modal>

<!--分配用户-->
<nz-modal [(nzVisible)]="isAssigUser"
          nzWidth="1170px"
          [nzTitle]="userTitle"
          [nzContent]="userContent"
          [nzMaskClosable]="false"
          (nzOnCancel)="isAssigUser = false"
          [nzFooter]="userModel"
          nzMaskClosable="false"
>
  <ng-template #userTitle>
    分配用户
  </ng-template>
  <ng-template #userContent>
    <div class="flex" style="font-weight: 800;">
      <span>角色名称：{{role.name}}</span>
      <span style="margin-left: 60px;flex: 1;">备注：{{role.remark}}</span>
    </div>
    <div class="aRow tableTop">
      <button nz-button nzType="primary" (click)="clickSearch()">
        <i nz-icon nzType="plus" nzTheme="outline"></i>添加人员
      </button>
      <button nz-button nzType="primary" [nzLoading]="isRemoveSlectUser" (click)="deleteAuthUserByUID(null)">
        <i nz-icon nzType="delete" nzTheme="outline"></i>移除
      </button>
    </div>
    <div>
      <nz-table
        #roleTable
        nzBordered
        [nzData]="authUsers"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        [nzLoadingDelay]="1"
        [nzScroll]="{ y: '200px' }"
        (nzCurrentPageDataChange)="currentPageDataChange($event,1)"
      >
        <thead>
        <tr>
          <th nzWidth="60px" class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck"
              [nzIndeterminate]="isIndeterminate"
              (nzCheckedChange)="checkAll($event,1)"
          ></th>
          <th nzWidth="80px">序号</th>
          <th nzWidth="110px">姓名</th>
          <th nzWidth="170px">工号</th>
          <th nzWidth="170px">部门</th>
          <th nzWidth="170px">职位</th>
          <th>岗位类型</th>
          <th nzWidth="170px">职称</th>
          <th nzWidth="70px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of roleTable.data;let num=index;">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[item.userId]"
            (nzCheckedChange)="refreshStatus(1);changeCheack(item,$event)"
          ></td>
          <td>{{num + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.number}}</td>
          <td>{{item.deptName}}</td>
          <td>{{item.position}}</td>
          <td>{{item.type === 0 ? '专技' : (item.type === 1 ? '工勤' : '管理')}}</td>
          <td>{{item.title}}</td>
          <td>
            <span class="operaFont firOpera" (click)="deleteAuthUserByUID(item.userId)">移除</span>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </ng-template>
  <ng-template #userModel>
    <div></div>
  </ng-template>
</nz-modal>


<!--选择用户-->
<nz-modal [(nzVisible)]="isSlectUser"
          nzWidth="1170px"
          [nzTitle]="selectTitle"
          [nzContent]="selectContent"
          [nzMaskClosable]="false"
          (nzOnCancel)="isSlectUser = false"
          [nzFooter]="selectModel"
          nzMaskClosable="false"
>
  <ng-template #selectTitle>
    添加人员
  </ng-template>
  <ng-template #selectContent>
    <div class="searchDiv">
      <label>
        <span>姓名：</span>
        <input nz-input placeholder="请输入姓名" [(ngModel)]="alertUserName"/>
      </label>
      <label>
        <span>工号：</span>
        <input nz-input placeholder="请输入工号" [(ngModel)]="alertNumber"/>
      </label>
      <label>
        <button nz-button style="margin-right:10px" nzType="primary" (click)="pageQueryUser()">查询</button>
        <button nz-button nzType="default" (click)="reset()">重置</button>
      </label>
    </div>
    <div class="aRow tableTop">
      <button nz-button nzType="primary" (click)="selectUserSingle()">
        确认选择
      </button>
    </div>
    <div>
      <ng-template #totalTwoTemplate let-total>总共 {{ pageInfo01.totalRecords? pageInfo01.totalRecords:0 }} 条</ng-template>
      <nz-table
        #roleTable
        nzBordered
        [nzData]="userList"
        [nzFrontPagination]="false"
        [nzShowPagination]="true"
        [nzPageIndex]="pageInfo01.first"
        [nzTotal]="pageInfo01.totalRecords"
        [nzShowTotal]="totalTwoTemplate"
        [nzPageSize]="pageInfo01.rows"
        [nzLoadingDelay]="1"
        [nzPageSizeOptions]="[5,10,20,30,50]"
        [nzShowQuickJumper]="true"
        [nzShowSizeChanger]="true"
        (nzPageIndexChange)="searchPageIndex01($event)"
        (nzPageSizeChange)="searchPageSize01($event)"
        (nzCurrentPageDataChange)="currentPageDataChange($event,2)"
        [nzScroll]="{ y: '200px' }"
      >
        <thead>
        <tr>
          <th nzWidth="50px" class="tableCheck"
              nzShowCheckbox
              [(nzChecked)]="isAllCheck01"
              [nzIndeterminate]="isIndeterminate01"
              (nzCheckedChange)="checkAll($event,2)"
          ></th>
          <th nzWidth="50px">序号</th>
          <th nzWidth="110px">姓名</th>
          <th nzWidth="170px">工号</th>
          <th nzWidth="170px">部门</th>
          <th nzWidth="170px">职位</th>
          <th>岗位类型</th>
          <th nzWidth="170px">职称</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of roleTable.data;let num=index;">
          <td
            nzWidth="50px"
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId01[item.id]"
            (nzCheckedChange)="refreshStatus(2);changeCheack(item,$event)"
          ></td>
          <td nzWidth="50px">{{num + 1}}</td>
          <td nzWidth="110px">{{item.name}}</td>
          <td nzWidth="170px">{{item.number}}</td>
          <td nzWidth="170px">{{item.deptName}}</td>
          <td nzWidth="170px">{{item.position}}</td>
          <td>{{item.type === 0 ? '专技' : (item.type === 1 ? '工勤' : '管理')}}</td>
          <td nzWidth="170px">{{item.title}}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </ng-template>
  <ng-template #selectModel>

  </ng-template>
</nz-modal>
